<!-- 角色查看 -->
<template>
    <div class="add-user">
        <div class="search-con">
            <Input @on-change="handleClear" clearable placeholder="请输入姓名或手机号码搜索" v-model="userSearch" class="searchInput"/>
            <Button @click="handleSearch" class="searchBtn" type="primary">
                <Icon custom="iconfont icon-sousuo" :size="16"/><span>搜索</span>
            </Button>
        </div>
        <Table @on-selection-change="roleUserSelected" @on-select-cancel="cancelRole"  border ref="selection" :columns="columns" :data="data" :stripe="true" class='assign'></Table>
        <Page :total="pageTotal" :current="pageno" :page-size="pageSize" @on-change="handlePage" prev-text="上一页" next-text="下一页" />
    </div>
</template>

<script>
import {getCompanyUser} from "@/api/staff"
export default {
    props:{
        addUserRoleId:{
            type:Number,
            default:null
        },
        userRoleData:{
            type:Array,
            default:[]
        },
    },
    data () {
        return {
            userSearch:'',
            pageTotal:null,
            pageno:1,
            pageSize:10,
            userIds:[],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: "姓名",
                    key: "name",
                },
                {
                    title: "ID",
                    key: "userId",
                },
                {
                    title: "电话",
                    key: "phone"
                }
            ],
            data: []
        };
    },

    methods: {
        handleClear (e) {
            if (e.target.value === '') {
                this.userSearch='';
            let data = {
                pageno: 1,
                keyword:this.userSearch,
            }
            this.getAdduserData(data)
            }
        },
        handleSearch () {
            let data = {
                pageno: 1,
                keyword:this.userSearch,
            }
            this.getAdduserData(data)
        },
        handlePage(value) {
            this.pageno = value
            let data = {
                pageno: value,
                keyword:this.userSearch,
            }
            this.getAdduserData(data)
        },
        getAdduserData(params){
            getCompanyUser(params).then(res=>{
                // console.log(this.userRoleData);
                let user = res.data.data.list;
                user.map(item=>{
                    this.userRoleData.map(e=>{
                        if(e.userId == item.userId){
                            item._disabled = true
                        }
                    })
                    this.userIds.map(e=>{
                        if(e == item.userId){
                            item._checked = true;
                        }
                    })
                });
                this.data = user
                this.pageTotal = res.data.data.total;
            })
        },
        roleUserSelected(selection){
            let userIds = [];
            if(selection.length == 0){
                this.userIds = userIds;
            }else{
                selection.forEach(element => {
                    userIds.push(element.userId);
                });
                if(this.userIds.length == 0){
                    this.userIds = userIds
                }else{
                    userIds.forEach(e=>{
                        if(!this.userIds.includes(e)) this.userIds.push(e);
                    })
                }
            }
            this.$emit('selectedRoleUser',this.userIds)
        },

        // 取消选中某一项触发
        cancelRole(selection,row){
            let index = this.userIds.indexOf(row.userId);
            this.userIds.splice(index,1);
        }
    },

    computed: {},
    updated(){
    //   this.getAdduserData(this.addUserRoleId); 
    //   console.log(this.addUserRoleId);
        
    },
    mounted(){
        this.userIds = [];
        this.getAdduserData(); 
    },

    components: {},

}

</script>
<style lang='less'>
    .add-user{
        padding: 0 10px;
        .search-con{
            padding-bottom: 15px;
            .searchBtn,.addBtn{
                margin-left: 10px;
                font-size: 14px;
                height: 32px;
                .icon-sousuo{
                    padding-right: 5px;
                    padding-bottom: 2px;
                }
                span{
                    vertical-align: baseline;
                }
            }
            .searchInput{
                width: 200px;
            }
        }  
    }
    .assign{
        margin-bottom: 15px;
        table{
            th,td{
                font-size: 14px;
                .ivu-btn:hover{
                    background: none;
                    color: #ed4014 !important;
                    text-decoration: underline;
                    border-color: transparent;
                }
            }
        }
    }
</style>